/* 
    Document   : message
    Created on : 21 Mar 11, 16:40:56
    Author     : Alfiansyah
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}


body{
	background-image:url(images/bg.png);
	background-repeat:repeat-x;
	background-color:#2A303D;
}


/*====================================HEADER=============================================*/
#headerwrapper{
	width:100%;
}
#headerbgfx{
	position:absolute;
	z-index:-1;
	background-image:url(images/bgfx.png);
	background-repeat:no-repeat;
	width:100%;
	height:600px;
}

#footooheader
{
	background-image:url(images/header.png);
	text-align: center;
	margin:0 auto;
	height:188px;
	width:940px;
	background-repeat:no-repeat;
}

#footoologo{
	position:absolute;
	z-index:1;
	float:left;
	height:80px;
	width:300px;
}
#footoologo a{
	background-image:	url(images/footoologo.png);
	background-repeat:no-repeat;
	margin-top:20px;
	margin-left:100px;
	float:left;
	height:80px;
	width:80px;
}
#footoologo a:hover{
	background-image:url(images/footoologohover.png);
	background-repeat:no-repeat;
}
#loginarea
{
	margin: 100px 25px 0 auto;
	float:right;
	text-align:right;
}
.iltext{
	color:#FFF;
	width:80px;
	text-align:left;
}

#logprofpicarea{
	position:absolute;
	margin-top:20px;
	float:right;
	width: 940px;
	height:160px;
}
#profpicarea{
	width: 600px;
	float:right;
	text-align:right;
}
#profpic{
	max-height:150px;
}
table.logouttable{
	font-family:"Segoe UI";
	float:right;
	margin-right:25px;
}
td.logouttd{
	width:200px;
	padding-right:10px;
	text-align:right;
	color:#FFF;
}
a.logoutButton{
	color:#FFF;
	font-size:18px;
}
h1.username{
}
/*====================================MENU-MENU=============================================*/

#footoomenu{
	background-image:url(images/headermenu.png);
	text-align: center;
	margin:0 auto;
	padding:0;
	height:77px;
	width:940px;
	background-repeat:no-repeat;
}
#footoomenu ul{
	height:77px;
	width:685px;
	float:right;
	list-style:none;
}
#footoomenu ul li{
	padding:0;
	margin:0;
	display:inline-block;
}

#footoomenu ul li a{
	float: left;
	display: block;
	font-size: 20px;
	width: 122px;
	height: 33px;
	padding-top: 12px;
	color: #333;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	outline: none;
}
#footoomenu ul li a:hover, #footoomenu ul .current {
    color: #000;
    background: url(images/menu_hover.png) no-repeat center top;
}




/*====================================TRANSISI=============================================*/
#headerfixer{
	margin:0;padding:0;
}
#headermirror{
	background-image:url(images/headermirror.png);
	background-repeat:no-repeat;
	height:70px;
	text-align: center;
	margin:0 auto;
	width:940px;
}

#searchbox{
	text-align:right;
}

/*====================================CONTENTS=============================================*/

#contentwrapper{
	background-image:url(images/bgwhite.png);
	background-repeat:repeat-y;
	margin:0 auto;
	width:940px;
	min-height:300px;
}

#contento{
	background-image:url(images/bgwhite.png);
	background-repeat:repeat-y;
	height:540px;
	width:940px;
}

#titlearea{
	width:250px;
	height:60px;
	padding:10px;
}

h1.title{
	margin-top:-10px;
	vertical-align:top;
	text-align:left;
	color:#FFF;
	font-family:"Segoe UI";
}


/*====================================PHOTOES=============================================*/
img.thumbnail{
	max-height:150px;
	max-width:150px;
}
.thumbListPhoto {
	cursor: pointer;
	vertical-align:middle;
	height:160px;
	width:160px;
	float:left;
	padding:5px;
}

.thumbListPhoto:hover {
	background-image:url(images/thumbfx.png);
	background-repeat:no-repeat;
}

div.thumbListPhoto a:hover{
	background-image:url(images/thumbfx.png);
}

/*====================================FOOTER=============================================*/
#footerwrapper{
	width:100%;
	text-align:center;
}
#footer{
	background-image:url(images/footer.png);
	background-repeat:no-repeat;
	margin:10px auto;
	width:940px;
	height:162px;
}
#footerleft{
	float:left;
	width:400px;
	height:140px;
	padding:15px;
	color:#CCC;
	vertical-align:middle;
}
#footermiddle{
	float:left;
	width:400px;
	height:130px;
}
#footerright{
}
#commentinput{
	display:none;
}

a.commentbutton{
	color:#FFF;
}

/*====================================Dari saya(Ronny)=============================================*/

td.search
{
	min-width:250px;
	max-width:400px;
}

td.photo
{
	width:600px;
	height:254px;
	background-color:#2A303D;
	padding: 10px;
	margin: 0px;
	border: 10px solid #235;
	text-align: left;
}

td.user
{
	width:600px;
	height:254px;
	background-color:#2A303D;
	padding: 10px;
	margin: 0px;
	border: 10px solid #235;
	text-align: left;
}

td.showuser
{
	width:110px;
	height:75px;
}

div.Box{
	background:url(images/bg-slice.png) repeat-x scroll 0 0 #333;
	padding: 10px;
	margin: 0px;
	border: 5px solid #999;
	text-align: center;
}

div.box{
	background:url(images/bg-slice.png) repeat-x scroll 0 0 #333;
	padding: 10px;
	margin: 3px;
	color : #FFF;
	border: 5px solid #999;
	text-align: center;
	font-family:Calibri,Georgia,Serif;
}

table.search
{
	margin-top : 20px;
	margin-left: 350px;
}

p.judul
{
	font-family:Calibri,Georgia,Serif;
	font-weight:bold;
	font-size:120%;
	text-align:center;
	color:#FFF;
}

a.out
{
	font-family:Calibri,Georgia,Serif;
	font-weight:bold;
	font-size:120%;
	text-align:center;
	color:#FFF;
}

a.biasa
{
	font-family:Arial,Tahoma,Serif;
	font-size:80%;
	text-align:center;
	color:#999;
}


/*====================================Dari saya(Alwi)=============================================*/

.profile_info{
    margin-top: 30px;
    float: right;
    position: relative;
    top: +10px;
    left: -150px;
    overflow: hidden;
    width: 500px;
}

#fotopropic{
    float: left;
    position: relative;
    top: +15px;
    left: +15px;
    overflow: hidden;
    margin-right: 70px;
}

#linkfromprofile{
    margin-left: 40px;
    margin-top: 20px;
}

.profileinfocontent{
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    overflow: hidden;
    margin-left: 80px;
    display: inline-block;
    width: 600px;
}

.followinger{
    float: right;
    margin-left: -400px;
    position: relative;
    top: +10px;

}

.profileinfo_label{
    float: left;
    position: relative;
    top: +2px;
    left: +4px;
    overflow: hidden;
    margin-left: 100px;
    margin-right: 10px;
    width: 100px;
}

.profileinfo_value{
    text-align: left;
}

.profilecontent{
    width: 900px;
}

div.boxy{
    background:url(images/bg-slice.png) repeat-x scroll 0 0 #333;
    padding: 10px;
    margin: 3px;
    color : #FFF;
    border: 5px solid #999;
    font-family:Calibri,Georgia,Serif;
}

div.boxy2{
    background:url(images/bg-slice.png) repeat-x scroll 0 0 #333;
    padding: 3px;
    margin: 3px;
    color : #FFF;
    border: 3px solid #999;
    font-family:Calibri,Georgia,Serif;
}

div.box2{
	background:url(images/bg-slice.png) repeat-x scroll 0 0 #333;
	padding: 20px;
	margin: 8px;
	color : #FFF;
	border: 5px solid #999;
	text-align: center;
	font-family:Calibri,Georgia,Serif;
}

.followinger{
    background:url(images/bg-slice.png) repeat-x scroll 0 0 #333;
    height: 60px;
    padding: 10px;
    margin: 3px;
    color : #FFF;
    border: 5px solid #999;
    font-family:Calibri,Georgia,Serif;
}

#editform label{
    width: 100px;
    margin-right: 20px;
    display: inline-block;
    margin-left: 300px;
}

#gambarwajah{
    margin-left: 450px;
}

.judulpesan{
    text-align: center;
    font-size: 20px;
    color: grey;
}

.textpesan{
    width: 500px;
    height: 60px;
}

#pesan{
    width: 500px;
    height: 60px;
}

#tanggal{
    float: left;
}

#pengirim{
    float: right;
}

#pesanmasuk{
    width: 510px;
    margin-left: 30px;
}

#pesansiap{
    width: 510px;
    margin-left: 30px;
}

#judularea{
    height: 20px;
}


.button180{
	cursor:pointer;
	background-image:url(images/button72.png);
	background-repeat:no-repeat;
	width:72px;
	height:40px;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	padding-top:5px;
        margin-left: 180px;
        margin-top: 5px;
}
.button180:hover{
	background-image:url(images/button72hover.png);
	background-repeat:no-repeat;
}

